

.grid-box-1 {
  border: 1px solid #999;
  width: 300px;
  height: 200px;
  display: grid;
  margin: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* grid-auto-rows: 50px; */
}
.grid-box-1 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
  /* height: 100px; */
}

/* 隐式网格 */
.grid-box-2 {
  border: 1px solid #999;
  width: 300px;
  height: 200px;
  display: grid;
  margin: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-rows: 40px;
}
.grid-box-2 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* 网格占多行多列 */
.grid-box-3 {
  border: 1px solid #999;
  width: 300px;
  height: 200px;
  display: grid;
  margin: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-rows: 40px;
}
.grid-box-3 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.grid-box-3 > div:nth-of-type(1) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2; /* 如果只占一行或一列，grid-xx-end属性可以不用写 */
}
.grid-box-3 > div:nth-of-type(2) {
  grid-row: 2 / 4; /* grid-row 是 grid-row-start 和 grid-row-end的缩写 */
}
.grid-box-3 > div:nth-of-type(3) {
  grid-column: 2 / span 2; /* span表示占据几行，这里表示从2开始，占据2行，也就是网格线2到4 */
}
.grid-box-3 > div:nth-of-type(6) {
  grid-column: 1 / span 3;
}

/* gap */
.grid-box-4 {
  border: 1px solid #999;
  width: 300px;
  height: 200px;
  display: grid;
  margin: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-column-gap: 2px;
  grid-row-gap: 6px;
}
.grid-box-4 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.grid-box-4 > div:nth-of-type(1) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2; /* 如果只占一行或一列，grid-xx-end属性可以不用写 */
}
.grid-box-4 > div:nth-of-type(2) {
  grid-row: 2 / 4; /* grid-row 是 grid-row-start 和 grid-row-end的缩写 */
}
.grid-box-4 > div:nth-of-type(3) {
  grid-column: 2 / span 2; /* span表示占据几行，这里表示从2开始，占据2行，也就是网格线2到4 */
}
.grid-box-4 > div:nth-of-type(6) {
  grid-column: 1 / span 3;
}



/* 网格项目重叠 */
.grid-box-5 {
  border: 1px solid #999;
  width: 300px;
  height: 200px;
  display: grid;
  margin: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-column-gap: 2px;
  grid-row-gap: 6px;
}
.grid-box-5 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.grid-box-5 > div:nth-of-type(1) {
  z-index: 2;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2; /* 如果只占一行或一列，grid-xx-end属性可以不用写 */
}
.grid-box-5 > div:nth-of-type(2) {
  grid-column: 1 / 2;
  grid-row: 1 / 4; /* grid-row 是 grid-row-start 和 grid-row-end的缩写 */
}
.grid-box-5 > div:nth-of-type(3) {
  grid-column: 2 / span 2; /* span表示占据几行，这里表示从2开始，占据2行，也就是网格线2到4 */
}
.grid-box-5 > div:nth-of-type(6) {
  grid-column: 1 / span 3;
}


/* Grid 容器尺寸不固定，自动适配子元素 */
.grid-box-6 {
  border: 1px solid #999;
  /* height: 200px; */
  display: grid;
  margin: 20px;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)) ;
}
.grid-box-6 > div {
  height: 50px;
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* Grid 网格线命名 */
.grid-box-7 {
  border: 1px solid #999;
  width: 400px;
  height: 120px;
  display: grid;
  margin: 20px;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 40px [content-start] 40px [content-end] 40px [main-end];
}
.grid-box-7 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.grid-box-7 > div:nth-of-type(1) {
  z-index: 2;
  grid-column-start: main-start;
  grid-column-end: main-end;
  grid-row-start: main-start;
  grid-row-end: content-start;
}
.grid-box-7 > div:nth-of-type(2) {
  grid-column: main-start / content-start;
  grid-row: content-start / main-end;
}

.grid-box-8 {
  border: 1px solid #999;
  width: 400px;
  height: 120px;
  margin: 20px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main . ."
    "sd sd sd ft ft ft ft ft ft";
}
.grid-box-8 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.grid-box-8 > div:nth-of-type(1){
  grid-area: hd;
}
.grid-box-8 > div:nth-of-type(2){
  grid-area: ft;
}
.grid-box-8 > div:nth-of-type(3) {
  grid-area: main;
}
.grid-box-8 > div:nth-of-type(4) {
  grid-area: sd;
}

.grid-box-9 {
  border: 1px solid #999;
  width: 200px;
  /* height: 120px; */
  margin: 20px;
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 50px;
  grid-auto-flow: dense;
}
.grid-box-9 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.grid-box-9 > div:nth-of-type(1){
  grid-column-end: span 3;
}
.grid-box-9 > div:nth-of-type(2n){
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.grid-box-10 {
  border: 1px solid #999;
  width: 200px;
  margin: 4px 20px 20px 20px;
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 40px;
  justify-items: start;
}
.grid-box-10 > div {
  background-color: bisque;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.grid-box-10 > div:nth-of-type(1) {
  justify-self: end;
}